<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基本语法</title> 
<style>
div.scroll{
    background-color: lightblue;
    width:100px;
    height:100px;
    overflow: scroll;
}
div.hidden{
    background-color: lightblue;
    width:100px;
    height:100px;
    overflow: hidden;    
}
div.float-left{
    width:100px;
    height:100px;
    background-color: black;
    float: left;
    opacity: 0.5;
}
div.info{
    background-color: greenyellow;
    border:4px solid red;
    padding:10px;
    overflow: hidden;
}
div.height30{
    background-color:aqua;
    border:4px solid red;    
    height:30px;
}
div.border{
    border:6px solid blue;
    width:100px;
    height:80px;
}
</style>
</head>
<body>
    <div class="scroll">
            You can use the overflow property when you want to have better control of the layout.
    </div>
    <div class="hidden">
            You can use the overflow property when you want to have better control of the layout.
    </div>  
    <hr />
    <div class="float-left">
    </div>
    <div class="info">
        You can use the overflow property when you want to have better control of the layout.
        You can use the overflow property when you want to have better control of the layout.
    </div>
    <hr />
    <div class="height30">
        You can use the overflow property when you want to have better control of the layout.
        <div class="border">
            Text in div.border
        </div>
    </div>
</body>
</html>

